{% extends "app/base_site.html" %}

{% block title %} 报警视频管理 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}

<link rel="stylesheet" href="/static/lib/jquery/fancybox/3.5.7/jquery.fancybox.min.css" />
<style>
    .alarm_item {
        display: block;
        /*padding: 4px;*/
        /*margin-bottom: 20px;*/
        line-height: 1.42857143;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        -webkit-transition: border .2s ease-in-out;
        -o-transition: border .2s ease-in-out;
        transition: border .2s ease-in-out;
    }
    .alarm_item_bottom {
        padding: 7px 5px;
        /* background: #F7F7F7; */
    }
    /*
    audio::-webkit-media-controls-play-button,
    audio::-webkit-media-controls-start-playback-button {
        background-color: #8d2f2f;
        color: #ffffff;
    }
    */

        #bxc_dialog_mask {
            background-color: rgba(0,0,0,0.5);   /* 设置半透明黑色背景 */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
        }

        #bxc_dialog {
            position: absolute;
            z-index: 999;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 640px;
            height: 240px;
            background-color: #ffffff;
            border: 1px solid #c51515;
            box-shadow: 0 0 5px rgba(245, 231, 231, 0.3);
            border-radius: 5px;
            padding: 10px;
            display: none;
        }

        #bxc_dialog>.dialog_title{
            margin-top: 10px;
        }
        #bxc_dialog>.dialog_title>.bxc_alarm_count{
            color: #d50404;
            font-weight: bold;
        }
        #bxc_dialog>.dialog_title>.close{
            font-size: 14px;
            float: right;
            margin-right: 10px;
            cursor: pointer;

        }
        #bxc_dialog>.dialog_content{
            border-top: 1px solid #4b4848;
            padding: 10px;
            margin-top: 15px;
        }
        #bxc_dialog>.dialog_content>.content_top{
            margin-top: 10px;
        }
        #bxc_dialog>.dialog_content>.content_list{
            margin-top: 10px;
        }
        #bxc_dialog>.dialog_content>.content_list>.content_item{
            display: inline;
            padding: 1px;
        }
        #bxc_dialog>.dialog_content>.content_list>.content_item>img{
            width: 102px;
            height: 100%;
            border: 1px solid #ffffff;
            padding: 1px;
            cursor: pointer;
        }
</style>
{% endblock stylesheets %}

{% block content %}

  <div class="right_col" role="main">
    <div class="">

      <div class="row">
        <div class="col-md-12">
          <div class="x_panel">
            <div class="x_title">
              <h2>报警视频管理
                  <span id="top_loading" ><img class="top_loading_img" src="/static/images/load.gif" alt="loading">加载中</span>
                  <span id="top_msg"></span>
              </h2>

              <label style="margin-left:20px;padding-top:5px;">
                <input type="checkbox" class="check_all">
              </label>
                <button style="margin-left:5px;" onclick="f_handleAllRead()" class="btn btn-success btn-sm"><i class="fa fa-book"></i> 已读</button>
                <button style="margin-left:2px;" onclick="f_handleAllDelete()" class="btn btn-success btn-sm"><i class="fa fa-remove"></i> 删除</button>

                <button style="margin-left:2px;" id="top_open_audio" class="btn btn-danger btn-sm">
                    <i class="fa fa-bell-slash-o"></i> 启动报警声音 <!-- <i class="fa fa-bell-slash-o"></i> 关闭报警声音 -->
                </button>

                <audio id="top_audio"  controls loop style="display: block;float: right; position: relative;height: 34px; "  >
                    浏览器不支持音频播放
                  </audio>

              <div class="clearfix"></div>
            </div>
            <div class="x_content">
             <div class="row" id="data">
              </div>
            </div>
          </div>
        </div>
      </div>


       <div class="row" id="pageData">
       </div>

<div id="bxc_dialog">
    <div class="dialog_title">
        <span class="bxc_alarm_count"></span>
        <button class="close" onclick="f_closeDialog()">关闭</button>
    </div>
    <div class="dialog_content">
        <div class="content_top">
            <span class="bxc_alarm_time"></span>
            <span style="margin-left: 5px;" class="bxc_alarm_control_code"></span>
        </div>
        <div class="content_list">
            <!--
            <div class="content_item"><img src="/static/images/user.png"></div>
            <div class="content_item"><img src="/static/images/user.png"></div>
            <div class="content_item"><img src="/static/images/user.png"></div>
            <div class="content_item"><img src="/static/images/user.png"></div>
            <div class="content_item"><img src="/static/images/user.png"></div>
            <div class="content_item"><span>共6张</span></div>
            -->
        </div>

    </div>
</div>
<div id="bxc_dialog_mask"></div>

    </div>
  </div>
{% endblock content %}

{% block javascripts %}
  {{ block.super }}

<script src="/static/lib/jquery/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script>
    let uploadAudioDir_www = '{{ uploadAudioDir_www }}';

    let eleData = $("#data");
    let elePageData = $("#pageData");
    let ele_top_loading = $("#top_loading");
    let ele_top_msg= $("#top_msg");

    let eleCheckAll = $(".check_all");
    let eleAudioPlayer = document.querySelector("#top_audio");
    let ele_btn_open_audio = $("#top_open_audio");
    let temp_audioPlayer_isOpen = false;

    let temp_cur_page = 1;//当前页面
    let temp_cur_page_size = 10;

    //报警弹窗专用start
    let eleBxcDialogMask = $("#bxc_dialog_mask")
    let eleBxcDialog = $("#bxc_dialog")
    let ele_bxc_alarm_img_list = $(".content_list");
    let ele_bxc_alarm_count = $(".bxc_alarm_count"); //报警数量
    let ele_bxc_alarm_time = $(".bxc_alarm_time"); //报警时间
    let ele_bxc_alarm_control_code = $(".bxc_alarm_control_code");//报警布控编号
    let temp_cur_alarm_count = 0;
    let temp_cur_alarm_image_count = 0;
    //报警弹窗专用end

    function f_showDialog() {
        eleBxcDialogMask.show();
        eleBxcDialog.show();
    }
    function f_closeDialog() {
         if (!eleAudioPlayer.paused) {//播放中
             eleAudioPlayer.pause();
         }
         temp_cur_alarm_count = 0;
         temp_cur_alarm_image_count = 0;

        eleBxcDialog.hide();
        eleBxcDialogMask.hide();
    }
    eleCheckAll.click(function() {
        $(".check_item").prop("checked", $(this).prop("checked"));
    });
    ele_btn_open_audio.click(function () {
        if(temp_audioPlayer_isOpen){//当前开启，点击则关闭
            $(this).html("<i class=\"fa fa-bell-slash-o\"></i> 开启报警声音");
            temp_audioPlayer_isOpen = false;
            try {
                if(!eleAudioPlayer.paused){
                    eleAudioPlayer.pause();
                }
            }catch (e) {
                console.log("audio.pause() error:",e)
            }
        }else{//当前关闭中，点击则开启
            temp_audioPlayer_isOpen = true;
            $(this).html("<i class=\"fa fa-bell-o\"></i> 关闭报警声音");
        }
    })

    function f_open_player(stream_app,stream_name){
        window.open("/player?app="+stream_app+"&name="+stream_name);
    }
    function f_control_edit(controlCode) {
        let url = "/control/edit?code="+controlCode;
        window.open(url);
    }
    function __f_get_alarm_ids_str(){
        let alarm_ids = [];
        $('.check_item').each(function(e) {
            //console.log("---------------------")
            //console.log($(e));
            //console.log($(this));
            //console.log(e);
            //console.log(this);
            //console.log($(this).prop("checked"));
            //console.log($(this).attr("value"));
            let is_check = $(this).prop("checked");// boolean 是否选中
            let alarm_id = $(this).attr("value");  // string 报警视频id
            //console.log(is_check,typeof is_check);
            //console.log(alarm_id,typeof alarm_id);
            if(is_check){
                alarm_ids.push(alarm_id);
            }
        });
        let alarm_ids_str = alarm_ids.join(",");
        //console.log("alarm_ids=",alarm_ids,typeof alarm_ids);
        //console.log("alarm_ids_str=",alarm_ids_str,typeof alarm_ids_str);

        return alarm_ids_str;
    }
    function f_show(code){
        let url = "/alarm/show?code="+code;
        window.open(url)
    }
    function f_postHandle(handle,alarm_ids_str){
        $.ajax({
            url: '/alarm/postHandle',
            type: "post",
            async: true,
            data: {"handle":handle,"alarm_ids_str":alarm_ids_str},
            dataType: "json",
            timeout: "3000",
            error: function () {
                myAlert("网络异常，请确定网络正常！", "error");
            },
            success: function (res) {
                if(1000===res.code){
                    eleCheckAll.prop("checked", false);
                    myAlert(res.msg,"success",1000);
                    setTimeout(function () {

                        f_getIndex(temp_cur_page,temp_cur_page_size);
                     }, 1000);
                }else{
                    myAlert(res.msg,"error");
                }
            }
        });
    }
    function f_handleAllRead(){
        alarm_ids_str = __f_get_alarm_ids_str();

        if(""===alarm_ids_str){
            myAlert("请至少选中一条数据","error");
        }else{
            f_postHandle('read',alarm_ids_str);
        }

    }
    function f_handleAllDelete(){
        alarm_ids_str = __f_get_alarm_ids_str();
        if(""===alarm_ids_str){
            myAlert("请至少选中一条数据","error");
        }else{
            f_postHandle('delete',alarm_ids_str);
        }
    }
    function f_getCheckNewData() {
        setTimeout(function () {
            __f_getCheckNewDataTimeout();
        }, 5000);
    }
    function __f_getCheckNewDataTimeout() {
        //检查新数据
       $.ajax({
            url: '/alarm/getCheckNewData',
            type: "get",
            async: true,
            data: {},
            dataType: "json",
            timeout: "3000",
            error: function () {
                myAlert("网络异常，请确定网络正常！", "error");
                //网络异常也要继续检测
                f_getCheckNewData();
            },
            success: function (res) {
                if(1000===res.code) {//检测到新数据
                    let info = res.info;

                    //播放声音start
                    if(temp_audioPlayer_isOpen) {//开启了播放声音
                        console.log("开启了播放声音")
                        let audio_path = info["audio_path"];
                        let audio_url = uploadAudioDir_www + audio_path
                        try {
                            if (!eleAudioPlayer.paused) {//播放中
                                eleAudioPlayer.pause();
                            }
                            eleAudioPlayer.setAttribute("src", audio_url)
                            eleAudioPlayer.play();
                        } catch (e) {
                            console.log("eleAudioPlayer.play() error:", e)
                        }
                    }
                    //播放声音end


                    //弹窗显示报警数据start
                    let alarm = info["alarm"];
                    let image_path_array = info["image_path_array"];
                    let image_path_array_len = image_path_array.length;

                    temp_cur_alarm_count +=1;
                    temp_cur_alarm_image_count += image_path_array_len;

                    let show_len = image_path_array_len;
                    if(show_len > 5){
                        show_len = 5;
                    }
                    let content_list_html="";
                    for (let i = 0; i < show_len; i++) {
                        content_list_html+="<div class=\"content_item\"><img src=\""+image_path_array[i]+"\"></div>";
                    }
                    content_list_html+="<div class=\"content_item\"><span style='margin-left:1px;'>共"+temp_cur_alarm_image_count+"张</span></div>"

                    let alarm_count_html = "发现"+temp_cur_alarm_count+"条新的报警视频";
                    let alarm_control_code_html = "<a href='javascript:f_show(\""+alarm["code"]+"\")'>查看报警视频</a>";

                    ele_bxc_alarm_count.html(alarm_count_html);
                    ele_bxc_alarm_time.html(alarm["create_time_str"]);
                    ele_bxc_alarm_control_code.html(alarm_control_code_html);
                    ele_bxc_alarm_img_list.html(content_list_html);
                    //弹窗显示报警数据end

                    f_showDialog();

                    $('img').click(function() {
                        $.fancybox.open({
                            src  : $(this).attr('src'),
                            type : 'image'
                        });
                    });

                    //刷新页面显示
                    f_getIndex(1,temp_cur_page_size);

                }else{
                    //未检测到新数据
                }

                //无论是否检测到新数据都要继续检测
                f_getCheckNewData();
            }
        });


    }

    function f_show_pageData(pageData) {
        let page_size = pageData["page_size"];
        let html = "";
        html+="<div class=\"col-md-12 col-sm-12 col-xs-12\"><ul class=\"pagination\">";
                html+="<li><span style=\"margin-right:10px;color:#000;\">共<span>"+pageData["page_num"]+"</span>页 / <span>"+pageData["count"]+"</span >条</span></li>";
            let pageLabels = pageData["pageLabels"];

            for (let i = 0; i < pageLabels.length; i++) {
                let cur = pageLabels[i]["cur"];
                console.log(typeof cur,cur)
                if(cur === 1){
                    html+="<li class=\"paginate_button active\"><a href=\"#\"  >"+pageLabels[i]["name"]+"</a></li>";
                }else{
                    html+="<li class=\"paginate_button \"><a href=\"javascript:f_getIndex("+pageLabels[i]["page"]+","+page_size+")\" >"+pageLabels[i]["name"]+"</a></li>";
                }
            }
        html+="</ul></div>";

        elePageData.html(html);
    }
    function f_getIndex(page,page_size) {
        temp_cur_page = page;
        temp_cur_page_size = page_size;
        
        ele_top_loading.show();
        $.ajax({
               url: '/alarm/getIndex',
               type: "get",
               async: true,
               data: {"p":page,"ps":page_size},
               dataType: "json",
               timeout: 0,
               error: function () {
                   ele_top_loading.hide();
                   myAlert("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   ele_top_loading.hide();
                   let top_msg = res.top_msg;
                   ele_top_msg.html(top_msg);

                   if(1000 === res.code){
                       let data = res.data;
                       let data_length = data.length;

                       let html = "";

                       if(0===data_length){
                          eleData.html("<p style='margin-left: 10px;font-size:15px;'>暂无报警数据</p>");
                       }else{
                            for (let i = 0; i < data_length; i++) {
                               let d = data[i];
                             html += "<div class=\"col-md-55\">";
                                html += "<div class=\"alarm_item\">";
                                  html += "<div class=\"image view view-first\">";
                                    html += "<video controls muted loop preload=\"none\" style=\"max-width: 220px;height: 100%; display: block;\" poster=\""+d["imageUrl"]+"\" src=\""+d["videoUrl"]+"\" ></video>";
                                 html += "</div>";
                                 html += "<div class=\"alarm_item_bottom\">";
                                 let state = d["state"];
                                    if(0===state){
                        html += "<span><span style=\"background-color:#1ABB9C !important;border-radius: 2px;font-size:10px;padding:1px 2px;color:#ffffff;margin:0 3px;\">未读</span>";
                            html += "<span style=\"border: 1px solid #ddd; border-radius: 6px; padding: 0 5px;margin-right: 2px;\">"+d["id"]+"</span><a class='sun-a-label' href='javascript:f_show(\""+d["code"]+"\")'>查看报警视频</a></span>";
                                    }else{
                         html += "<span><span style=\"border: 1px solid #ddd; border-radius: 6px; padding: 0 5px;margin-right: 2px;\">"+d["id"]+"</span><a class='sun-a-label' href='javascript:f_show(\""+d["code"]+"\")'>查看报警视频</a></span>";
                                    }
                                  html += "<div style=\"position: relative; display: block;\">";
                                     html += "<label style=\"float:left;\"><input type=\"checkbox\" class=\"check_item\" value=\""+d["id"]+"\"></label>";
                                    html += "<span style=\"margin-left:5px;\">"+d["create_time_str"]+"</span>";
                                   html += "</div>";
                                  html += "</div>";
                                html += "</div>";
                              html += "</div>";
                           }
                            eleData.html(html);
                            f_show_pageData(res.pageData)
                        }

                   }else{
                       myAlert(res.msg,"error");
                   }
               }
            });

    }
    window.onload = function (){
        f_getIndex(1,temp_cur_page_size);
        f_getCheckNewData();

    };


</script>
{% endblock javascripts %}

